<template>
	<view v-if="!loading" class="code_wrapper">
		<view v-if="!details" class="no_data">
			<image src="https://app.zbzedu.com/static/WaChat/img/v2_qpfnyw.png" class="no_img"></image>
			<view class="u-text-center color-999 u-font-sm">{{msg}}</view>
			<u-button type="primary" shape="circle" :custom-style="customStyle" @click="jump('/package/pince/index')">
				点击开始测评</u-button>
		</view>
		<view v-else>
			<view class="t_1 u-flex flex-around">
				<view class="item_t_1 u-flex flex-center u-flex-col">
					<view class="u-font-lg color-333 u-p-t-30 u-p-b-20 font-b">您的职业兴趣：</view>
					<view v-if="details.careerInterest">
						<text v-for="(item, index) in details.careerInterest.split('')" :key="index"
							class="font-b u-font-40" :style="{color: getColor(item), fontSize: '25px'}">{{item}}</text>
					</view>
				</view>
				<view class="item_t_1 u-flex flex-center u-flex-col">
					<view class="u-font-lg color-333 u-p-t-30 u-p-b-20 font-b">您的技能信心：</view>
					<view>
						<text v-for="(item, index) in details.skillConfidence.split('')" :key="index" class="font-b"
							:style="{color: getColor(item), fontSize: '25px'}">{{item}}</text>
					</view>
				</view>
			</view>
			<view>
				<view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">您的职业价值观：</view>
				<view style="width: 80%;margin: 0 auto">
					<view class="item_percent" v-for="(item, index) in showData" v-if="details[item.key]" :key="index">
						<view class="u-font-sm" style="color: #2A6AAA">{{item.title}}</view>
						<view class="u-flex flex-between">
							<view class="flex-1 flex-center u-p-t-5">
								<u-line-progress active-color="#2A6AAA" :percent="details[item.key]"
									:show-percent="false" :height="20"></u-line-progress>
							</view>
							<view class="u-p-l-10 font-b u-font-28">
								{{details[item.key] > 33 ? (details[item.key] > 66 ? '高' : '中' ) : '低'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 80%;margin: 0 auto" v-if="kemu.length">
				<view class="u-font-lg color-333 u-p-t-50 u-p-b-10 u-text-center font-b">您的高考选课推荐：</view>
				<view class="u-p-t-20 u-flex flex-around" style="flex-wrap: wrap">
					<view v-for="item in kemu" class="col-fff bg_D86E63 u-m-b-10" v-if="item.linkValue"
						:key="item" style="padding: 15upx 14upx">{{item.linkValue}}</view>
				</view>
			</view>
			<view style="width: 90%;margin: 0 auto">
				<view class="u-font-lg color-333 u-p-t-50 u-p-b-2 u-text-center font-b">您的职业与专业类推荐:</view>
				<view class="u-font-xs color-999 u-p-b-20 u-text-center">(可点击职业名称或专业进行探索)</view>
				<view class="m_table">
					<view class="th u-flex bg_D86E63 col-fff u-font-sm">
						<view class="item_th flex-1 u-text-center">类型</view>
						<view class="item_th flex-1 u-text-center">职业</view>
						<view class="item_th flex-1 u-text-center">专业类</view>
					</view>
					<view class="tr u-flex" :key="index" v-for="(item, index) in tableData"
						v-if="item.data.length && item.data[0].linkValue"
						style="height: 100%;align-content: stretch; align-items: normal">
						<view style="flex: 1" class="td flex-center u-flex u-text-center u-p-l-10 u-p-r-10">
							{{item.path}}
						</view>
						<view style="flex: 2" class="item_line">
							<view v-for="(item1, index1) in item.data" :key="index1" class="u-flex view"
								v-if="item1.linkValue" style="align-content: stretch;align-items: normal;">
								<view class="flex-1 flex-center u-flex td_2 td_2_2">
									<navigator :url="`/pages/explore/job_detail?id=${item1.linkKey}`"
										style="height: 100%;width: 100%;text-align: center"
										class="color-active flex-center u-flex" v-if="item1.linkKey">
										{{ item1.linkValue }}
									</navigator>
									<view v-else>{{ item1.linkValue }}</view>
								</view>
								<view class="flex-1 right_item">
									<navigator v-for="(per, perIndex) in item1.specialtyList" :key="perIndex"
										v-if="per.secSpeCode" class="u-flex flex-center td_2 color-active"
										:url="`/package/report/report_zhuanye_lei?code=${per.secSpeCode}&n=${per.specialtyName}`">
										{{per.specialtyName}}
									</navigator>
									<view class="u-flex flex-center td_2" v-else>{{per.specialtyName}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-text-center color-999 u-font-xs u-padding-20">报告更新日期：{{details.updateTime}}</view>
		</view>
	</view>
</template>

<script>
	import {
		THEME
	} from "../../pages/mixins/config.js";
	import {
		request
	} from "../../util/api";
	import {
		CHECK_TOKEN
	} from '../../util/util'
	export default {
		data() {
			return {
				isLoging:CHECK_TOKEN(),
				imagePath: '',
				userId:"",
				details: '',
				customStyle: {
					background: THEME.btn_active_bg_color,
					padding: '0 30rpx',
					marginTop: '10px',
					marginLeft: '10%',
					width: '80%'
				},
				loading: true,
				msg: '',
				showData: [{
						title: '成就感',
						key: 'raccomplishment'
					}, {
						title: '生活方式',
						key: 'rlifestyle'
					}, {
						title: '挑战',
						key: 'rchallenge'
					},
					{
						title: '声望',
						key: 'rprestige'
					},
					{
						title: '同事',
						key: 'rcooperation'
					},
					{
						title: '安全感',
						key: 'rsecurity'
					},
					{
						title: '创造性',
						key: 'rcreativity'
					},
					{
						title: '监督',
						key: 'rsupervise'
					},
					{
						title: '收入',
						key: 'rincome'
					},
					{
						title: '多样化',
						key: 'rdiversification'
					},
					{
						title: '独立性',
						key: 'rindependence'
					},
					{
						title: '工作场所',
						key: 'rworkplace'
					}
				],
				kemu: [],
				tableData: []
			}
		},
		onLoad(option) {
			this.userId=option.userId
			this.getDetail()
		},
		mounted() {
			// this.makePic()
		},
		methods: {
			getColor(val) {
				let color = THEME.text_active_color
				switch (val) {
					case 'I':
						color = '#855BE9'
						break;
					case 'A':
						color = '#D33332'
						break;
					case 'E':
						color = '#857423'
						break;
					case 'C':
						color = '#478432'
						break;
					case 'R':
						color = '#2B72D4'
						break;
					case 'S':
						color = '#DE6C2B'
						break;
				}
				return color
			},
			getDetail() {
				request({
					url:this.isLoging ? '/app/base/wxShare/getReportLogin' :'/app/base/sharePage/getReportLoginNo',
					method: 'post',
					platfom: 'weixin',
					data:{
						uid:this.userId
					}
				}).then(res => {
					this.showData.sort((a, b) => {
						return res.data[b.key] - res.data[a.key]
					})
					this.loading = false
					this.details = res.data
					if (res.code != 200) {
						this.msg = res.msg
					}
					if (this.details) {
						let groupArr = this.groupByPath(this.details.expandList, 'linkType')
						this.kemu = groupArr.filter(item => item.path == '高考科目推荐')[0].data
						let tableData = groupArr.filter(item => item.path != '高考科目推荐')
						this.tableData = tableData
					}
				})
			},
			groupByPath(arr, key) {
				let map = {}
				for (let i = 0; i < arr.length; i++) {
					let ai = arr[i]
					if (!map[ai[key]]) {
						map[ai[key]] = [ai]
					} else {
						map[ai[key]].push(ai)
					}
				}
				let res = []
				Object.keys(map).forEach(keys => {
					res.push({
						path: keys,
						data: map[keys],
					})
				})
				return res
			},

			jump(path) {
				this.$u.route({
					url: path,
					type: 'switchTab'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.code_wrapper {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		position: relative;
		// background: linear-gradient(90deg, #FFA600 0%, #FE642C 98%);
	}

	$active_color: #2A6AAA;

	.no_data {
		.no_img {
			width: 100%;
			height: 600upx;
		}
	}

	.bg_D86E63 {
		background: #2A6AAA;
	}

	.width_100 {
		width: 100%;
	}

	.tr {
		background: #E4E5E6;
		border-top: 1px solid #fff;

		.item_line .view {
			.td_2 {
				border-right: 1px solid #fff;
			}
		}
	}

	.td {
		border-right: 1px solid #fff;

		&:last-child {
			border-right: none;
		}
	}

	.th {
		padding: 15upx 0;
	}

	.td_2 {
		border-bottom: 1px solid #fff;
		padding: 15upx 0;

		&:last-child {
			border-bottom: none;
		}
	}

	.right_item {
		border-bottom: 1px solid #fff;
	}

	.item_line .view {
		&:last-child {
			.right_item {
				border-bottom: none;
			}

			.td_2_2 {
				border-bottom: none;
			}
		}
	}

	.btns {
		display: flex;
		justify-content: space-evenly;
		margin: 40rpx 0;

		.btn {
			width: 260rpx;
			height: 92rpx;
			line-height: 92rpx;
			background-color: #2A6CAC;
			border-radius: 46rpx;
			color: #FFFFFF;
		}
	}
</style>
